<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .card {
            width: 300px;
            background-color: deeppink;
            padding: 10px;/* 2. 不规定具体方向 则默认四个方向都是n像素 */
            margin-bottom: 30px;/* 4. margin-bottom: 下外间距 - 精确设置指定元素某一方向的外间距 */
            overflow: hidden;/* 5. 给父级元素增加元素 使得子级元素无法超出父级区域 */
        }
        /* 1. >: 表示直接指向子级元素 */
        .card>img {
            width: 100%;/* 1. 表示子级宽度为父级卡片宽度的100% */
        }
        .card>p {
            border: 5px solid grey;/* 3. p元素边框 浮点数运算 不精确 有时会有误差 */
            margin: 10px 20px 30px 40px;/* 4. margin: 外间距 - 简写形式: 从上开始 顺时针进行设置 - 上 右 下 左 */
        }

    </style>
</head>
<body>
<div class="card">
    <img src="img/1.png">
    <p>段落文字1</p>
</div>
<div class="card">
    <img src="img/1.png">
    <p>段落文字2</p>
</div>
</body>
</html>